﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Earthwatchers Admin</title>
    <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="jquery.base64.js" type="text/javascript"></script>

    <style>
        body {
            font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
        }

        .tdnumber {
            text-align: right;
        }

        .tdcheck {
            text-align: center;
        }

        .url {
            width: 300px;
        }

        .label {
            float: left;
            width: 96px;
            margin-left: 0px;
        }

        #hourInput {
            width: 40px;
        }

        #minutesInput {
            width: 40px;
        }

        #secondsInput {
            width: 20px;
        }
    </style>
</head>
<body>
    <h3>Administrator - Find the jaguar</h3>
    <br />
    <br />
    username:
    <input type="text" id="tbUsername" value="" /><br />
    password:
    <input type="password" id="tbPassword" value="" />
    <br />
    <br />

    <input id="LoadJaguarPositionButton" type="button" value="Cargar Valores" />
    <br />
    <h4>Agregar Ubicaciones del Jaguar</h4>
    <div>
        <div></div>
        <div class="label">Día</div>
        <div>
            <select id="dayInput">
                <option value="1">Lunes</option>
                <option value="2">Martes</option>
                <option value="3">Miercoles</option>
                <option value="4">Jueves</option>
                <option value="5">Viernes</option>
                <option value="6">Sabado</option>
                <option value="7">Domingo</option>
            </select>
        </div>
        <div class="label">Hora</div>
        <div>
            <select id="hourInput">
                <option value="00">00</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
            </select>
        </div>
        <div class="label">Minutos</div>
        <div>
             <select id="minutesInput">
                <option value="00">00</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
                <option value="32">32</option>
                <option value="33">33</option>
                <option value="34">34</option>
                <option value="35">35</option>
                <option value="36">36</option>
                <option value="37">37</option>
                <option value="38">38</option>
                <option value="39">39</option>
                <option value="40">40</option>
                <option value="41">41</option>
                <option value="42">42</option>
                <option value="43">43</option>
                <option value="44">44</option>
                <option value="45">45</option>
                <option value="46">46</option>
                <option value="47">47</option>
                <option value="48">48</option>
                <option value="49">49</option>
                <option value="50">50</option>
                <option value="51">51</option>
                <option value="52">52</option>
                <option value="53">53</option>
                <option value="54">54</option>
                <option value="55">55</option>
                <option value="56">56</option>
                <option value="57">57</option>
                <option value="58">58</option>
                <option value="59">59</option>
            </select>
        </div>
        <div class="label">Latitud</div>
        <div>
            <input id="latitudeInput" />
        </div>
        <div class="label">Longitud</div>
        <div>
            <input id="longitudInput" />
        </div>

        <input id="addJaguarPosition" type="button" value="Agregar" />

    </div>
    <h4>Listado de Ubicaciones</h4>
    <table border="1" cellpadding="6" cellspacing="0">
        <thead>
            <tr style="background-color: #cecece">
                <td>Día</td>
                <td>Hora</td>
                <td>Latitud</td>
                <td>Longitud</td>
                <td></td>
            </tr>
        </thead>
        <tbody id="jaguarsPositionTable">
        </tbody>
    </table>
    <br />
    <a href="index.html">back</a>


    <script type="text/javascript">
        function getAuthString()
        {
            return "Basic " + $.base64Encode(document.getElementById("tbUsername").value + ":" + document.getElementById("tbPassword").value);
        }

        function LoadJaguarsPositions()
        {
            $('#jaguarsPositionTable').html('');

            $.ajax({
                cache: false,
                type: "GET",
                data: "{\"Name\":\"" + document.getElementById("tbUsername").value + "\",\"Password\":\"" + document.getElementById("tbPassword").value + "\" }",
                url: "../api/jaguarpositions",
                beforeSend: function (xhr)
                {
                    xhr.setRequestHeader("Authorization", getAuthString());
                },
                contentType: "application/json ; charset=utf-8",
                dataType: "json",
                success: function (result)
                {
                    $(result).each(function ()
                    {
                        var html = '<td>' + $(this).attr('Day') + '</td>'
                        + '<td class="tdnumber">' + $(this).attr('Hour') + ":" + $(this).attr('Minutes') + '</td>'
                        + '<td class="tdnumber">' + $(this).attr('Latitude') + '</td>'
                        + '<td class="tdnumber">' + $(this).attr('Longitude') + '</td>'
                        + '<td><a href="#" onclick="deleteJaguarPosition('+ $(this).attr('Id') + ');"title="Borrar Posici&oacute;n del Jaguar">X</a>';
                        $('<tr></tr>').html(html).appendTo('#jaguarsPositionTable');
                    });
                },
                error: function (xhr, textStatus, errorThrown)
                {
                    alert(errorThrown);
                }
            });
        }

        function deleteJaguarPosition(id)
        {
            if (id == "")
            {
                alert("error");
                return false;
            }

            if (confirm('Está seguro que desea borrar esta posicion?'))
            {
                $.ajax({
                    type: 'POST',
                    beforeSend: function (xhr)
                    {
                        xhr.setRequestHeader("Authorization", getAuthString());
                    },
                    url: "../api/jaguarpositions/del",
                    data: JSON.stringify(id),
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8',
                    success: function (result)
                    {
                        alert('Operación Exitosa!');
                        LoadJaguarsPositions();
                    },
                    error: function (xhr, textStatus, errorThrown)
                    {
                        alert(errorThrown);
                    }
                });
            }
        }

        $(document).ready(function ()
        {
            $("#addJaguarPosition").click(function () 
            {
                var lat = $('#latitudeInput').val().replace(",", ".");
                var long = $('#longitudInput').val().replace(",", ".");
                var day = $('#dayInput').val();
                var hour = $('#hourInput').val();
                var minutes = $('#minutesInput').val();
                var time = hour + ':' + minutes + ':00';

                if (!isNaN(lat) && !isNaN(long) && lat != '' && long != '' && time != '' && day != '')
                {
                    var jaguarpos = new Object();
                    jaguarpos.Latitude = lat;
                    jaguarpos.Longitude = long;
                    jaguarpos.Day = day;
                    jaguarpos.Hour = hour;
                    jaguarpos.Minutes = minutes;

                    $.ajax({
                        type: "POST",
                        url: "../api/jaguarpositions",
                        beforeSend: function (xhr)
                        {
                            xhr.setRequestHeader("Authorization", getAuthString());
                        },
                        data: JSON.stringify(jaguarpos),
                        contentType: "application/json ; charset=utf-8",
                        dataType: "json",
                        success: function ()
                        {
                            alert("Congratulations, new position added.");
                            LoadJaguarsPositions();
                        },
                        error: function (xhr, textStatus, errorThrown)
                        {
                            alert("error, something is wrong adding the jaguar's possition");
                        }
                    });
                }
                else
                {
                    alert('Debe completar todos los datos y los valores deben ser numéricos');
                }
            });

            $("#LoadJaguarPositionButton").click(function ()
            {
                LoadJaguarsPositions();
            });
        });

    </script>
</body>
</html>
